<template>
  <div>
    <div class="lable-title">
      <ul>
        <li
          v-for="(item, index) in labelTitle"
          :key="index"
          :class="labelNum === index ? 'li-select' : ''"
          @click="titleClick(index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div style="clear: both" />
    <Header
      v-if="labelNum === 0"
      :action="true"
      :details="details"
      @edit="edit"
      @recharge="recharge"
      @refundBalance="refundBalance"
    />
    <el-card v-if="labelNum === 0" class="mt10">
      <div class="label-box">
        <!-- <el-row type="flex" justify="space-between">
          <el-col :span="2">
            <span class="title">基本信息</span>
          </el-col> -->
        <!-- <el-col :span="1.5" style="display: flex;">
            <el-input maxlength="10" :placeholder="请输入标签内容" class="mr10" />
            <el-button type="primary" @click="handleClick">添加</el-button>
          </el-col> -->
        <!-- </el-row> -->
        <!-- <el-row>
          <div class="dotted-line" />
        </el-row> -->
        <el-row class="main-content-container">
          <el-form
            ref="from"
            :inline="true"
            :model="details"
            label-width="100px"
          >
            <el-row>
              <div class="info-title">基本信息</div>
            </el-row>
            <el-row>
              <el-col
                v-for="(item, index) in basicsInfo"
                :key="index"
                :span="12"
                style="font-size: 20px; margin-top: 20px"
              >
                <el-form-item
                  v-if="item.controlledStatus !== '不显示'"
                  :label="item.name + '：'"
                  :prop="item.type"
                >
                  <div v-html="details[item.type]">{{ details[item.type] }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row>
              <div class="info-title">特征信息</div>
            </el-row>
            <el-row>
              <el-col
                v-for="(item, index) in featuresInfo"
                :key="index"
                :span="12"
                style="font-size: 20px; margin-top: 20px"
              >
                <el-form-item
                  v-if="item.controlledStatus !== '不显示'"
                  :label="item.name + '：'"
                  :prop="item.type"
                >
                  <div v-html="details[item.type]">{{ details[item.type] }}</div>
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row>
              <div class="info-title">聊天工具资料</div>
            </el-row>
            <el-row>
              <el-col
                v-for="(item, index) in chatToolInfo"
                :key="index"
                :span="12"
                style="font-size: 20px; margin-top: 20px"
              >
                <el-form-item
                  v-if="item.controlledStatus !== '不显示'"
                  :label="item.name + '：'"
                  :prop="item.type"
                >
                  {{ details[item.type] }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <div class="info-title">归属信息</div>
            </el-row>
            <el-row>
              <el-col
                v-for="(item, index) in ascriptionInfo"
                :key="index"
                :span="12"
                style="font-size: 20px; margin-top: 20px"
              >
                <el-form-item
                  v-if="item.controlledStatus !== '不显示'"
                  :label="item.name + '：'"
                  :prop="item.type"
                >
                  {{ details[item.type] }}
                </el-form-item>
              </el-col>
              <el-col :span="12" style="font-size: 20px; margin-top: 20px">
                <el-form-item label="建档人：">
                  {{ details.archivistName }}
                </el-form-item>
              </el-col>
              <el-col :span="12" style="font-size: 20px; margin-top: 20px">
                <el-form-item label="建档时间：">
                  {{ details.createdTime }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </div>
    </el-card>
    <ConsultationRecord v-if="labelNum === 1" :details="details" />
    <IntentionDemand v-if="labelNum === 2" :details="details" />
    <GecordsOfConsumption v-if="labelNum === 3" :details="details" />
    <ProjectRecords v-if="labelNum === 4" :details="details" />
    <ReturnVisitRecord v-if="labelNum === 5" :details="details" />
    <!-- <div style="margin-top: 20px; text-align: center">
      <el-button type="primary" @click="closeHandle">关闭</el-button>
    </div> -->
  </div>
</template>
<script>
import Header from "./header";
import ConsultationRecord from "./consultationRecord";
import IntentionDemand from "./intentionDemand";
import GecordsOfConsumption from "./recordsOfConsumption";
import ProjectRecords from "./projectRecords";
import ReturnVisitRecord from "./returnVisitRecord";
export default {
  components: {
    Header,
    ConsultationRecord,
    IntentionDemand,
    GecordsOfConsumption,
    ProjectRecords,
    ReturnVisitRecord,
  },
  props: {
    details: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    var validatorPhone = function(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      isModify: false,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        phone: [{ required: true, validator: validatorPhone, trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
      basicsInfo: [],
      ascriptionInfo: [],
      featuresInfo: [],
      labelTitle: ["档案信息", "咨询记录", "意向需求", "消费记录", "项目记录", "回访记录"],
      labelNum: 0,
      chatToolInfo: [],
    };
  },
  mounted() {
    this.getFindAll(this.details);
  },
  methods: {
    openAdvisoryRecord(row, id, idList) {
      this.$emit("openAdvisoryRecord", row, id, idList);
    },
    seeOrderDetails(orderId, customerId) {
      this.$emit("seeOrderDetails", orderId, customerId);
    },
    viewProject(row, customerId) {
      // 项目记录
      this.$emit("viewProject", row, customerId);
    },
    viewVisit(row, customerId) {
      this.$emit("viewVisit", row, customerId);
    },
    async getFindAll(row) {
      this.basicsInfo = [];
      this.ascriptionInfo = [];
      this.featuresInfo = [];
      const res = await this.$api["customer/setUp/findAll"]({});
      if (res.code !== 200) return;
      let appendMessage;
      if (row && row.appendMessage) { appendMessage = JSON.parse(row.appendMessage); }
      res.data.tableConfigEntities.forEach((item) => {
        if (item.classify === "1") {
          this.basicsInfo.push(item);
        } else if (item.classify === "4") {
          this.ascriptionInfo.push(item);
        } else if (item.classify === "3") {
          this.chatToolInfo.push(item);
        } else {
          this.featuresInfo.push(item);
          if (appendMessage) {
            appendMessage.forEach((json) => {
              if (json.name === item.name) {
                this.details[item.type] = json.value;
              }
            });
          }
        }
      });
    },
    edit(flag) {
      if (flag) {
        this.isModify = flag;
      } else {
        this.$refs.from.validate(async(valid) => {
          if (!valid) return;
          const res = await this.$api["customer/customers/modify"]({
            ...this.details,
          });
          if (res.code !== 200) return this.$message.error("修改失败！");
          this.$message.success("修改成功！");
          this.$emit("modifySuccess");
        });
      }
    },
    closeHandle() {
      this.$emit("closeHandle");
    },
    titleClick(index) {
      this.labelNum = index;
    },
    recharge() {
      this.$emit("recharge");
    },
    refundBalance() {
      this.$emit("refundBalance");
    },
  },
};
</script>
<style lang="scss" scoped>
.label-box {
  min-height: 150px;
}
.el-row {
  align-items: center;
}
.title {
  font-weight: 700;
}
.dotted-line {
  margin: 10px 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(
    to right,
    #ccc 0%,
    #ccc 50%,
    transparent 50%
  );
  background-size: 20px 1px;
  background-repeat: repeat-x;
}
.info-title {
  margin: 20px 0;
}
.lable-title {
  li {
    float: left;
    margin-right: 20px;
    cursor: pointer;
    width: 84px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 16px;
    color: #666;
    background: #ebf0fe;
  }
}
.li-select {
  color: #fff !important;
  background: #0278dc !important;
}
/deep/.el-form-item__content p{
  margin: 0px !important;
}
</style>
